import React, { useState } from 'react';
import {


    HomeOutlined,
    DiffOutlined,
    UnorderedListOutlined,
    FileImageOutlined,
    UserOutlined,
    UserSwitchOutlined

} from '@ant-design/icons';
import {  Menu } from 'antd';
import { useLocation, useNavigate } from 'react-router-dom';
const items = [
    {
        key: '/home',
        label: '首页',
        icon: <HomeOutlined />
    },
    {
        key: '/user',
        label: '用户管理',
        icon: <UserOutlined />
    },
    {
        key: '/carousel',
        label: '轮播图管理',
        icon: <FileImageOutlined />
    },
    {
        key: '/recipe',
        label: '菜谱管理',
        icon: <UnorderedListOutlined />
    },
    {
        key: '/vip',
        label: '会员管理',
        icon: <UserSwitchOutlined />
    },
    {
        key: '/package',
        label: '套餐管理',
        icon: <DiffOutlined />
    },

];
const MenuList = () => {
    const {pathname} = useLocation();
    const navigate = useNavigate()

    // 路由跳转
    const onClick = (e) => {
        navigate(e.key)
    }
    return (
        <div
            style={{
                width: '100%',
            }}
        >

            <Menu
                onClick={onClick}
                defaultSelectedKeys={[pathname]}
                // defaultOpenKeys={['sub1']}
                mode="inline"
                items={items}
                theme="dark"
            />
        </div>
    );
};
export default MenuList;